<script lang="ts" setup>
  import type { FormInstance } from 'element-plus'
  import type { FormRules } from 'element-plus'
  import { addFieldCfg, updateFieldCfg } from '@/api/dictConfig'
  import {
    formTypeList,
    fieldTypeOptions,
    defaultSearchOptions,
  } from '@/constant/index'

  const emits = defineEmits(['fetch-data'])
  const $baseMessage = inject('$baseMessage')
  const ruleFormRef = ref<FormInstance>()
  const visible = ref(false)
  const title = ref('')
  const state = reactive({
    form: {},
  })

  const rules = reactive<FormRules>({
    fieldName: [{ required: true, message: '请输入字段名', trigger: 'blur' }],
    fieldProperty: [
      {
        required: true,
        message: '请输入字段属性名',
        trigger: 'blur',
      },
    ],
    displayName: [
      {
        required: true,
        message: '请输入字段显示名称',
        trigger: 'blur',
      },
    ],
    formType: [
      {
        required: true,
        message: '请选择组件类型',
        trigger: 'change',
      },
    ],
    width: [
      {
        required: true,
        message: '请输入宽度',
        trigger: 'change',
      },
    ],
    sort: [
      {
        required: true,
        message: '请输入排序',
        trigger: 'change',
      },
    ],
    fieldType: [
      {
        required: true,
        message: '请选择字段类型',
        trigger: 'change',
      },
    ],
    moduleCode: [
      { required: true, message: '请输入所属模块编码', trigger: 'blur' },
    ],
    typeCode: [
      { required: true, message: '请输入所属功能编码', trigger: 'blur' },
    ],
    //    associateModuleCode: [
    //      { required: true, message: '请输入关联模块编码', trigger: 'blur' },
    //    ],
    //    associateTypeCode: [
    //      { required: true, message: '请输入关联功能编码', trigger: 'blur' },
    //    ],
    onSearchCol: [
      { required: true, message: '请选择是否在表格中展示', trigger: 'change' },
    ],
    onDataCol: [
      { required: true, message: '请选择是否在表格中展示', trigger: 'change' },
    ],
    onFormCol: [
      { required: true, message: '请选择是否在表单中展示', trigger: 'change' },
    ],
    defaultField: [
      { required: true, message: '请选择是否在表单中展示', trigger: 'change' },
    ],
  })

  const showEdit = (row) => {
    if (!row) {
      title.value = '新增'
    } else {
      title.value = '编辑'
      state.form = JSON.parse(JSON.stringify(row))
    }
    visible.value = true
  }

  const close = () => {
    ruleFormRef.value.resetFields()
    state.form = {}
    visible.value = false
  }

  const save = async () => {
    await ruleFormRef.value.validate(async (valid) => {
      if (valid) {
        try {
          const params = JSON.parse(JSON.stringify(state.form))
          if (title.value === '新增') {
            params.userId = 0
          }
          const { msg } =
            title.value === '新增'
              ? await addFieldCfg(params)
              : await updateFieldCfg([params])
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          emits('fetch-data')
          close()
        } catch (e) {
          console.error(e)
        }
      }
    })
  }

  defineExpose({
    showEdit,
  })
</script>

<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="600"
    :before-close="close"
    :close-on-click-modal="false"
  >
    <el-form
      ref="ruleFormRef"
      :model="state.form"
      label-width="140px"
      :rules="rules"
      @submit.prevent
    >
      <el-form-item label="字段名" required prop="fieldName">
        <el-input v-model="state.form.fieldName" />
      </el-form-item>
      <el-form-item label="字段属性名" required prop="fieldProperty">
        <el-input v-model="state.form.fieldProperty" />
      </el-form-item>
      <el-form-item label="字段显示名称" required prop="displayName">
        <el-input v-model="state.form.displayName" />
      </el-form-item>
      <el-form-item label="组件类型" required prop="formType">
        <el-select v-model="state.form.formType">
          <el-option
            v-for="item in formTypeList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-show="
          state.form.formType === 40 ||
          state.form.formType === 41 ||
          state.form.formType === 42 ||
          state.form.formType === 43
        "
        label="下拉数据源字典编码"
        prop="formCode"
      >
        <el-input v-model="state.form.formCode" />
      </el-form-item>
      <el-form-item
        v-show="state.form.formType === 42 || state.form.formType === 43"
        label="关联模块编码"
        prop="associateModuleCode"
      >
        <el-input v-model="state.form.associateModuleCode" />
      </el-form-item>
      <el-form-item
        v-show="state.form.formType === 42 || state.form.formType === 43"
        label="关联功能编码"
        prop="associateTypeCode"
      >
        <el-input v-model="state.form.associateTypeCode" />
      </el-form-item>
      <el-form-item label="表格项宽度" prop="width" required>
        <el-input v-model="state.form.width" />
      </el-form-item>
      <el-form-item label="排序" prop="sort" required>
        <el-input v-model="state.form.sort" />
      </el-form-item>
      <el-form-item label="查询条件" prop="searchCondition">
        <el-select v-model="state.form.searchCondition">
          <el-option
            v-for="item in defaultSearchOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="字段校验" prop="formValidation">
        <el-input v-model="state.form.formValidation" />
      </el-form-item>
      <el-form-item label="字段类型" required prop="fieldType">
        <el-select v-model="state.form.fieldType">
          <el-option
            v-for="item in fieldTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属模块编码" required prop="moduleCode">
        <el-input v-model="state.form.moduleCode" placeholder="zgyp-work" />
      </el-form-item>
      <el-form-item label="所属功能编码" required prop="typeCode">
        <el-input v-model="state.form.typeCode" placeholder="assetInfo" />
      </el-form-item>
      <el-form-item label="是否在查询中展示" required prop="onSearchCol">
        <el-select v-model="state.form.onSearchCol">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否在表格中展示" required prop="onDataCol">
        <el-select v-model="state.form.onDataCol">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否在表单中展示" required prop="onFormCol">
        <el-select v-model="state.form.onFormCol">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否默认" required prop="defaultField">
        <el-select v-model="state.form.defaultField">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
